HTML Elements

    The HTML elements provide the semantic meaning to the web-page content. We usually interchangeably use the term HTML elements and tags, but technically both are different. An HTML tag is just a character inside the angle bracket<>, whereas the HTML element is a collection of starting tag, its attribute, content and end tag. For example: 

    <p class= "para"> This is a Paragraph </p>

    here <p> and </p> are two tags, class ="para" is the attribute and the complete statement <p class= "para"> This is a Paragraph </p> is the element. In a nutshell, we can say that anything which defines the page component is an HTML element, and it includes tags, tag name, attributes, and content.

    Nested HTML Elements

    If one HTML element is defined under another HTML element then it would be considered as a nested HTML element. Every HTML element is nested under <html> element, and every page content element is nested under <body> element. Let’s look at the HTML Document formatting: 

    <!DOCTYPE html>
<html>
<body>

<h1>TechGeekBuzz</h1>
<p>Welcome to TechGeekBuzz.</p>

</body>
</html>

    Behind the Code

    • In the above example all the other HTML elements are defined inside the <html> element.
    • The <body> element is also defined inside the opening and closing tag of <html>, so <body> element is the nested element of <html>
    • There are two more elements <p> and <h1> which are defined inside the <body> element, so we can say that both <p> and <h1> are the nested elements of the <body>/
    • There are no nested elements which are defined inside the <p> and <h1> elements.

    Always use end tag with for the paired tags.

    If a tag is paired, then we should always end it with its ending tag. If we do not mention the end tag, then there could be some situation occur when we can see some un-wanted formatting of our web page.

    Example 

    <!Doctype html>  
<html>
<body>

<h1>It is a heading
<p>It’s a paragraph </p>

</body>
</html>

    Here you can see that we did not mention the ending tag </h1> for <h1>. So, when the browser parses the document, it will treat all the elements as heading 1, because the browser does not know where to stop for the heading 1 content. So here the paragraph content will also be treated a heading 1.

    Empty HTML Elements

    There are some HTML tags which do not comes in pair, and these tags are known as empty HTML elements. For example, <br> is an empty tag which is used to break the line. 

     <p>First line <br> Second Line.</p>

    If you want, you can put a forward slash with these empty tags, e.g. <br/> , it won’t affect the operation.

    Case Insensitive

    HTLM is a case insensitive language which means you do not need to worry about case sensitivity of the tags, <p> and <P> would work the same.

    Summary

    • An HTML Element is a collection of starting tags, tag attributes, content and ending tag.
    • The content between the two tags is known as element content.
    • An element inside another element is known as nested elements.
    • An empty tag does not have end tags.
    • We can put a forward slash within the empty tag.
    Previous Tutorial Next Tutorial